<template>
	<view>
		<view class="banners">
			<u-swiper
				:list="details.albums"
				keyName="url"
				:height="800"
				@change="e => albumsCurrentNum = e.current"
				:autoplay="true"
				indicatorStyle="right: 30rpx; bottom:50rpx"
			>
				<view
					slot="indicator"
					class="indicator-num"
				>
					<text class="indicator-num__text">{{ albumsCurrentNum + 1 }}/{{ details.albums.length }}</text>
				</view>
			</u-swiper>
		</view>
		
		<view class="content-padding">
			<u-text :lines="3" :size="32" margin="20rpx 0 20rpx 0" :bold="true" :text="details.goods_name"></u-text>
			
			<view class="flex">
				<u-text :lines="1" color="#999" :size="28" margin="20rpx 0 20rpx 0" :text="'库存：'+details.goods_store"></u-text>
				<u-text :lines="1" color="#999" :size="28" margin="20rpx 0 20rpx 0" :text="'类别：'+details.goods_type_display"></u-text>
			</view>
		</view>
		
		<u-gap height="20" bgColor="#f8f8f8"></u-gap>
		<view class="content-padding details-wrap">
			<u-text color="#000" :size="32" :bold="true" margin="0rpx 0 30rpx 0" text="商品详情"></u-text>
			<view class="route-details flex">
				<u-parse :content="details.details"></u-parse>
			</view>
		</view>
		
		<view class="page-footer-placehold"></view>
		<view class="page-footer flex">
			<view class="page-footer__info flex">
				<template v-if="details.pay_type==1">
					<view class="flex price-item">
						<text class="price">{{ details.goods_golds }}</text>
						<text class="unit">金币</text>
					</view>
				</template>
				
				<template v-if="details.pay_type==2">
					<view class="u-flex">
						<view class="flex price-item">
							<text class="price">{{ details.goods_golds }}</text>
							<text class="unit">金币</text>
						</view>
						
						<text class="plus">+</text>
						
						<view class="flex price-item">
							<text class="price">{{ details.goods_price }}</text>
							<text class="unit">元</text>
						</view>
					</view>
				</template>
				
				<template v-if="details.pay_type==3">
					<view class="flex price-item">
						<text class="price">{{ details.goods_price }}</text>
						<text class="unit">元</text>
					</view>
				</template>
			</view>
			<view class="page-footer__option">
				<u-button color="#FF0000" text="立即购买" @click="openBuyPage"></u-button>
			</view>
		</view>
		
		<u-popup :show="showBuyPage" :closeable="true" @close="hideBuyPage" :round="40" :close-on-click-overlay="true">
			<view class="popup-page">
				<view class="popup-page__title flex">
					<text>选择收货地址/数量</text>
				</view>
				
				<scroll-view scroll-y="true">
					<view class="popup-page__content">
						<u-form labelPosition="left" :model="buyParams">
							<u-form-item
								label="商品名称"
								prop="buyParams"
								:labelWidth="140">
								<u-text :text="details.goods_name" :bold="true" :size="30"></u-text>
							</u-form-item>

							<u-form-item
								label="商品类别"
								prop="buyParams"
								:labelWidth="140">
								<u-text :text="details.goods_type_display" :size="30"></u-text>
							</u-form-item>
							
							<u-form-item
								label="剩余库存"
								prop="buyParams"
								:labelWidth="140">
								<u-text :text="details.goods_store+'件'" :size="30"></u-text>
							</u-form-item>
							
							<u-form-item
								label="最大订购"
								prop="buyParams"
								:labelWidth="140">
								<u-text :text="details.max_nums+'件'" :size="30"></u-text>
							</u-form-item>
							
							<u-form-item
								label="购买形式"
								prop="buyParams"
								:labelWidth="140">
								<u-text :text="details.pay_type_display" :size="30"></u-text>
							</u-form-item>
							
							<u-form-item
								label="商品售价"
								prop="buyParams"
								:labelWidth="140">
								<template v-if="details.pay_type==1">
									<view class="flex price-item">
										<text class="price">{{ details.goods_golds }}</text>
										<text class="unit">金币</text>
									</view>
								</template>
								
								<template v-if="details.pay_type==2">
									<view class="u-flex">
										<view class="flex price-item">
											<text class="price">{{ details.goods_golds }}</text>
											<text class="unit">金币</text>
										</view>
										
										<text class="plus">+</text>
										
										<view class="flex price-item">
											<text class="price">{{ details.goods_price }}</text>
											<text class="unit">元</text>
										</view>
									</view>
								</template>
								
								<template v-if="details.pay_type==3">
									<view class="flex price-item">
										<text class="price">{{ details.goods_price }}</text>
										<text class="unit">元</text>
									</view>
								</template>
							</u-form-item>
							
							<u-form-item
								label="收货地址"
								prop="userInfo.sex"
								:labelWidth="140"
								v-if="details.goods_type != 6"
								@click="selectAddress()">
								<u-text
									:text="chooseAddressDetails"
									:size="30"
									:lines="2"
								></u-text>
								<u-icon
									slot="right"
									name="arrow-right"
								></u-icon>
							</u-form-item>
							
							<u-form-item
								label="订购数量"
								prop="buyParams"
								:labelWidth="140">
								<u-number-box
									button-size="38"
									:integer="true"
									:inputWidth="70"
									v-model="buyParams.nums"
									:min="1"
									:max="details.max_nums"
								></u-number-box>
							</u-form-item>
						</u-form>
					</view>
				</scroll-view>

				<view class="popup-page__footer">
					<view class="tips flex">
						<text class="tips__grey">需支付</text>
						
						<template v-if="details.pay_type==1">
							<view class="flex price-item">
								<text class="price">{{ buyParams.total_golds }}</text>
								<text class="unit">金币</text>
							</view>
						</template>
						
						<template v-if="details.pay_type==2">
							<view class="flex price-item">
								<text class="price">{{ buyParams.total_golds }}</text>
								<text class="unit">金币</text>
							</view>
							
							<text class="plus">+</text>
							
							<view class="flex price-item">
								<text class="price">{{ buyParams.total_amt }}</text>
								<text class="unit">元</text>
							</view>
						</template>
						
						<template v-if="details.pay_type==3">
							<view class="flex price-item">
								<text class="price">{{ buyParams.total_amt }}</text>
								<text class="unit">元</text>
							</view>
						</template>
					</view>
					
					<view class="buy-button" @click="confirmBuy">确定购买</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { goldsMallGoodsDetails,orderUnionCreate,orderUnionPayment } from '@/api/api.js'
	export default {
		data() {
			return {
				goodsId: 0,
				albumsCurrentNum : 0,
				details: {
					goods_name: '',
					albums: [],
					goods_type: 0,
					goods_type_display: '',
					goods_store: 0,
					goods_price: 0,
					pay_type: 0,
					pay_type_display: '',
					goods_golds: 0,
					details: '',
					max_nums: 1,
				},
				showBuyPage: false,
				buyParams: {
					order_type: 2,
					goods_id: 0,
					address_id: 0,
					nums: 1,
					total_amt: 0,
					total_golds: 0
				},
				chooseAddressDetails: '请选择收货地址',
				showAddress: false,
				userGolds: uni.getStorageSync('ftxUserGolds') || 0,
			}
		},
		onLoad(options) {
			this.goodsId = options.goodsId || 0
			if ( this.goodsId > 0 ) {
				this.buyParams.goods_id = this.goodsId
				this.loadData()
			}
		},
		onShow() {
			let _addressInfo = uni.getStorageSync('mallRecipientAddress') || null
			if ( _addressInfo != null ) {
				this.buyParams.address_id = _addressInfo.id
				this.chooseAddressDetails = _addressInfo.reciver_name + '，' + _addressInfo.mobile + '，' + _addressInfo.address+_addressInfo.details
			}
		},
		watch: {
			'buyParams.nums': function(newNums,oldNums) {
				this.calcTotal()
			}
		},
		methods: {
			loadData() {
				goldsMallGoodsDetails(this.goodsId).then(res => {
					this.details = res.data
					console.log(this.details)
				})
			},
			selectAddress() {
				uni.navigateTo({
					url: '/pagesA/pages/address/select'
				})
			},
			openBuyPage() {
				this.showBuyPage = true
				this.calcTotal()
			},
			hideBuyPage() {
				this.showBuyPage = false
			},
			// 计算总金额
			calcTotal() {
				if ( this.details.pay_type == 1) {
					this.buyParams.total_amt   = 0
					this.buyParams.total_golds = uni.$lv.number.mul(this.details.goods_golds , this.buyParams.nums)
				}
				if ( this.details.pay_type == 2) {
					this.buyParams.total_amt = uni.$lv.number.mul(this.details.goods_price , this.buyParams.nums)
					this.buyParams.total_golds = uni.$lv.number.mul(this.details.goods_golds , this.buyParams.nums)
				}
				if ( this.details.pay_type == 3) {
					this.buyParams.total_amt = uni.$lv.number.mul(this.details.goods_price , this.buyParams.nums)
					this.buyParams.total_golds = 0
				}
			},
			// 确认购买
			confirmBuy() {
				if ( !this.buyParams.address_id && this.details.goods_type != 6 ) {
					return uni.showToast({
					    title: '请选择收货地址',
					    icon: 'none'
					})
				}
				if ( this.buyParams.nums < 1 ) {
					return uni.showToast({
					    title: '最小订购数为1',
					    icon: 'none'
					})
				}
				uni.showLoading({
					title: '正在提交'
				})
				orderUnionCreate(this.buyParams).then(res => {
					uni.hideLoading()
					uni.showToast({
					    title: '下单成功',
					    icon: 'none'
					})
					
					orderUnionPayment(res.data.order_id).then(payres => {
						if ( payres.data.pay_status == 1 ) {
							setTimeout(function(){
								uni.navigateTo({
									url: `/pages/order/mall?current=1`
								})
							},2000)
							
							return uni.showToast({
								title: "支付成功~",
							})
						}
						
						if ( payres.data.pay_params ) {
							uni.requestPayment({
								...payres.data.pay_params,
								success: () => {
									setTimeout(function(){
										uni.navigateTo({
											url: `/pages/order/mall?current=1`
										})
									},2000)
									return uni.showToast({
										title: "支付成功~",
									})
								},
								fail: () => {
									setTimeout(function(){
										uni.navigateTo({
											url: `/pages/order/mall?current=0`
										})
									},2000)
									return uni.showToast({
										title: "支付失败~",
										icon: 'error'
									})
								}
							})
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}
	.content-padding {
		padding: 0 30rpx;
	}
	.details-wrap {
		padding-top: 30rpx;
		width: 690rpx;
		overflow: hidden;
	}
	.tips {
		align-items: center;
		&__grey {
			color: #999;
			font-size: 28rpx;
			margin-right: 20rpx;
		}
	}
	.page-footer-placehold {
		height: 140rpx;
	}
	.page-footer {
		height: 140rpx;
		padding: 0 20rpx;
		padding-bottom: 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: space-between;
		align-items: center;
		&__info {
			flex: 1;
			align-items: center;
		}
		&__option {
			width: 260rpx;
		}
	}
</style>
